<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<link rel="icon" href="/favicon.ico" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>中国熔断</title>
		<script src="./settings.js" type="text/javascript"></script>
		<style type="text/css">
			.loader-main {
				position: fixed;
				width: 100%;
				height: 100%;
				background-color: #f9f9f9;
				z-index: 9999999;
			}

			.loader-c {
				position: relative;
				left: 50%;
				top: 50%;
			}

			.loader {
				width: 50px;
				height: 50px;
				z-index: 999999;
				background-color: #f9f9f9;
			}

			.loader:before {
				content: '';
				width: 50px;
				height: 7px;
				border-radius: 50%;
				background: #000;
				opacity: 0.1;
				position: absolute;
				top: 59px;
				left: 0;
				animation: shadow 0.5s linear infinite;
			}

			.loader:after {
				content: '';
				width: 50px;
				height: 50px;
				border-radius: 3px;
				background-color: #16baaa;
				position: absolute;
				top: 0;
				left: 0;
				animation: loading 0.5s linear infinite;
			}

			@-webkit-keyframes loading {
				17% {
					border-bottom-right-radius: 3px;
				}

				25% {
					transform: translateY(9px) rotate(22.5deg);
				}

				50% {
					transform: translateY(18px) scale(1, 0.9) rotate(45deg);
					border-bottom-right-radius: 40px;
				}

				75% {
					transform: translateY(9px) rotate(67.5deg);
				}

				100% {
					transform: translateY(0) rotate(90deg);
				}
			}

			@keyframes loading {
				17% {
					border-bottom-right-radius: 3px;
				}

				25% {
					transform: translateY(9px) rotate(22.5deg);
				}

				50% {
					transform: translateY(18px) scale(1, 0.9) rotate(45deg);
					border-bottom-right-radius: 40px;
				}

				75% {
					transform: translateY(9px) rotate(67.5deg);
				}

				100% {
					transform: translateY(0) rotate(90deg);
				}
			}

			@-webkit-keyframes shadow {

				0%,
				100% {
					transform: scale(1, 1);
				}

				50% {
					transform: scale(1.2, 1);
				}
			}

			@keyframes shadow {

				0%,
				100% {
					transform: scale(1, 1);
				}

				50% {
					transform: scale(1.2, 1);
				}
			}
		</style>
	</head>
	<body>
		<div class="loader-main" id="loader-main">
			<div class="loader-c loader"></div>
		</div>

		<div id="app"></div>
		<script type="module" src="/src/main.js"></script>
	</body>
</html>